<template>
  <view class="challenge-container setting-popup">
    <button @click="emitClose" style="position:absolute;right:20rpx;top:20rpx;z-index:10;">关闭</button>
    <view class="header">
      <view class="timer">倒计时：{{ timer }}s</view>
      <view class="score">得分：{{ score }}</view>
    </view>
    <view class="game-area">
      <!-- 这里后续用canvas或自定义组件实现锤子、气球、障碍物的渲染和交互 -->
      <canvas canvas-id="challengeCanvas" class="game-canvas"></canvas>
    </view>
    <view class="actions">
      <button @click="useMemory">位置记忆</button>
      <button @click="useTip">提示</button>
      <button @click="useMagnet">魔力磁吸</button>
    </view>
    <view v-if="showRevive" class="modal">
      <!-- <image src="/static/image.png" mode="widthFix" class="modal-img" /> -->
      <view class="modal-timer">{{ reviveTimer }}s后自动关闭</view>
      <button @click="goHome">返回首页</button>
      <button @click="revive">复活</button>
    </view>
    <view v-if="showEnd" class="modal">
      <view class="modal-title">挑战结束</view>
      <view class="modal-score">得分：{{ score }}</view>
      <button @click="restart">重玩</button>
      <button @click="goHome">返回首页</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['close'])
const emitClose = () => emit('close')

const timer = ref(120)
const score = ref(0)
const showRevive = ref(false)
const reviveTimer = ref(10)
const showEnd = ref(false)

const useMemory = () => {
  uni.showToast({ title: '位置记忆开发中', icon: 'none' })
}

const useTip = () => {
  uni.showToast({ title: '提示功能开发中', icon: 'none' })
}

const useMagnet = () => {
  uni.showToast({ title: '魔力磁吸开发中', icon: 'none' })
}

const goHome = () => {
  uni.reLaunch({ url: '/pages/index/index' })
}

const revive = () => {
  uni.showToast({ title: '复活功能开发中', icon: 'none' })
  showRevive.value = false
}

const restart = () => {
  uni.redirectTo({ url: '/pages/challenge/challenge' })
}
</script>

<style scoped>
.challenge-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.setting-popup {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
  padding: 40rpx 0;
  min-width: 600rpx;
  min-height: 400rpx;
  position: relative;
  z-index: 1002;
  opacity: 1;
}
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background-color: #fff;
}
.timer, .score {
  font-size: 32rpx;
  color: #333;
}
.game-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
}
.game-canvas {
  width: 90vw;
  height: 60vh;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx #ccc;
}
.actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 20rpx 0;
  background-color: #fff;
}
.actions button {
  flex: 1;
  margin: 0 10rpx;
}
.modal {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal-img {
  width: 60vw;
  margin-bottom: 20rpx;
}
.modal-timer, .modal-title, .modal-score {
  font-size: 36rpx;
  color: #fff;
  margin: 20rpx 0;
}
button {
  width: 60vw;
  margin: 20rpx 0;
}
</style> 